<template>
    <div style="background-color: white;margin: 30px;padding: 30px;">
    <el-form
      ref="ruleFormRef"
      style="max-width: 1300px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="病历号" prop="orderNo" >
        <el-input v-model="ruleForm.orderNo" placeholder="请输入名称"/>
      </el-form-item>
      <el-form-item label="患者姓名" prop="patientName">
        <el-input v-model="ruleForm.patientName" placeholder="请输入名称"/>
      </el-form-item>
      <el-form-item label="性别" prop="patientGender">
       <el-switch v-model="ruleForm.patientGender"
        active-color="#13ce66" inactive-color="#ff4949" inlined active-text="男" inactive-text="女"/>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="ruleForm.age" placeholder="请输入名称"/>
      </el-form-item>
      <el-form-item label="检查/检验/处置建议" prop="proposal">
        <el-input v-model="ruleForm.proposal" placeholder="请输入名称"/>
      </el-form-item>
      <el-form-item label="断诊结果" prop="diagnosis">
        <el-input v-model="ruleForm.diagnosis " placeholder="请输入名称"/>
      </el-form-item>
      <el-form-item label="注意事项" prop="careful">
        <el-input v-model="ruleForm.careful " placeholder="请输入名称"/>
      </el-form-item>
      <el-form-item label="处理意见" prop="cure">
        <el-input v-model="ruleForm.cure" placeholder="请输入名称" />
      </el-form-item>
     
      <el-form-item>
        <el-button style="margin-left: 300px;width: 100px;"  type="success" @click="submitForm(ruleFormRef)">提交</el-button>
        <el-button style="margin-left: 50px;width: 100px;"  type="primary" @click="storageForm(ruleFormRef)">暂存</el-button>
        <el-button style="margin-left: 150px;width: 100px;"  type="danger" @click="resetForm(ruleFormRef)">重置</el-button>
        <el-button  style="margin-left: 50px;width: 100px;"   @click="goToBookIndex">首页</el-button>
      </el-form-item>
    
    </el-form>
 
</div>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import { ElNotification, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
  import router from '@/router';
  import axiosInstance from '@/utils/axiosUtils';
  interface User {
  orderNo: string
  patientName: string
  patientGender: string
  age: string
  proposal: string
  diagnosis: string
  careful: string
  cure: string
}
const goToBookIndex = () => {
router.push({name:'bookIndex'});
}
 const registerId=JSON.parse(sessionStorage.getItem('Patient')).id;
 const patient=JSON.parse(sessionStorage.getItem('Patient'));
 console.log(registerId)
 
  interface RuleForm {
    orderNo: string
    patientName: string
    patientGender: string
    age: string
    proposal: string
    diagnosis: string
    careful: string
    cure: string
    
  }
  
  const formSize = ref<ComponentSize>('default')
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive<RuleForm>({
     orderNo: patient.caseNumber,
     patientName: patient.patientName,
     patientGender: patient.patientGender,
     age: patient.age,
     proposal: '',
     diagnosis: '',
     careful: '',
     cure: '',
  })
  
  const storageForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    const formData = formEl.model as RuleForm
    console.log('storage form data:', formData)
  }
  
  const rules = reactive<FormRules<RuleForm>>({
    orderNo: [
      { required: true,max: 20, message: '请输入病历号', trigger: 'blur' },
   
    ],
    patientName: [
      { required: true, max:5,message: '请输入患者姓名', trigger: 'blur' },
      { type: 'string', message: '患者姓名必须为汉字', trigger: 'blur' },
    ],
    patientGender: [
      { required: true, message: '请选择性别', trigger: 'blur' },
    ],
    age: [
      { required: true, message: '请输入年龄', trigger: 'blur' },
   
    ],
    proposal: [
      { required: true, message: '请输入检查/检验/处置建议', trigger: 'blur' },
        { type: 'string', message: '检查/检验/处置建议必须为汉字', trigger: 'blur' },
    ],
    diagnosis: [
      { required: true, message: '请输入断诊结果', trigger: 'blur' },
      { type: 'string', message: '断诊结果必须为汉字', trigger: 'blur' },
    ],
    careful: [
      { required: true, message: '请输入注意事项', trigger: 'blur' },
      { type: 'string', message: '注意事项必须为汉字', trigger: 'blur' },
    ],
    cure: [
      { required: true, message: '请输入处理意见', trigger: 'blur' },
      { type: 'string', message: '处理意见必须为汉字', trigger: 'blur' },
    ]
  })
  
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        axiosInstance.post('/api/medicalRecord/updateMedicalRecord',{
          registerId:registerId,
          orderNo:ruleForm.orderNo,
          proposal:ruleForm.proposal,
          diagnosis:ruleForm.diagnosis,
          careful:ruleForm.careful,
          cure:ruleForm.cure
        }).then(res => {
          console.log(res)
          
           ElNotification.success('提交成功')
            resetForm(formEl)
    
        })
        console.log('submit!')
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  
  const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
  }))
  </script>